
window.onload = function() {
$('#svgIndex').svg({onLoad: drawIntro});
};
/*
function draw (svg) {
    var g = svg.group({stroke: 'black', strokeWidth: 2});
    svg.line(g, 450, 120, 550, 20, {strokeWidth:  5});
}*/

function drawIntro(svg) { 
    
//    svg.rect(20, 50, 100, 50, {fill:'white', stroke:'black', strokeWidth: 2});
//    svg.text(70, 79, "Activiteitsgraad", {textAnchor: "middle", fontSize: 14});
    drawBox(svg, "Activiteitsgraad", 50, 50);
    drawArrow(svg, 125, 100, 125, 150, 2);
    drawArrow(svg, 200, 175, 250, 175, 2);
    drawArrow(svg, 400, 175, 450, 175, 2);
    drawArrow(svg, 325, 100, 325, 150, 2);
    drawArrow(svg, 325, 200, 325, 250, 2);
    drawArrow(svg, 525, 200, 525, 250, 2);
    drawBox(svg, "Ranking", 50, 150);
    drawBox(svg, "Onderwerpen", 50, 250);
    drawBox(svg, "Individu", 250, 150);
    drawBox(svg, "Geslacht", 250, 50);
    drawBox(svg, "Partij", 450, 150);
    drawBox(svg, "Burgemeester", 250, 250);
    drawBox(svg, "Partijen", 450, 250);
}

function drawBox(svg, text, x, y) {
    id = text.replace(' ', '');
    
    var thePage = '';
    switch(id) {
        case 'Ranking' : thePage = 'ranking.xql'; break;
        case 'Activiteitsgraad' : thePage = 'activity.xql'; break;
        case 'Onderwerpen' : thePage = 'subjects.xql'; break;
/*        case 'Individu' : thePage = 'Individual.xql'; break;*/
        case 'Burgemeester' : thePage = 'mayorIndex.xql'; break;
        case 'Geslacht' : thePage = 'sexIndex.xql'; break;
/*        case 'Partij' : thePage = 'party.xql'; break;*/
        case 'Partijen' : thePage = 'partyIndex.xql'; break;
        default: thePage = null;
    }

    var w = 150;
    var h = 50;
    var background = svg.rect(x, y, w, h, 10, 10, {fill:'white', stroke:'black', strokeWidth: 2, id: id+'Background'});
    svg.text(x+w/2, y+h/2+4, text, {textAnchor: "middle", fontSize: 14, fontStyle : (thePage? 'normal' : 'italic'), fill: (thePage? 'navy' : '#888')});
    svg.rect(x, y, w, h, 10, 10, {fill:'transparent', stroke:'black', strokeWidth: 2, onmouseover: (thePage? 'hoverBackground("'+id+'Background")' : null), onmouseleave: (thePage? 'unhoverBackground("'+id+'Background")' : null), onclick: (thePage? 'goToPage("'+thePage+'")' : null), cursor: (thePage? 'pointer' : 'default')});

}

function drawArrow(svg, x1, y1, x2, y2, strokeWidth) {
    var g = svg.group({stroke:'black'});
    svg.line(g, x1, y1, x2, y2, {strokeWidth:strokeWidth});
}

function hoverBackground(id) {
    var svg = $('#svgIndex').svg('get');
    var e = svg.getElementById(id);
    e.setAttribute('fill', '#eee');
}

function unhoverBackground(id) {
    var svg = $('#svgIndex').svg('get');
    var e = svg.getElementById(id);
    e.setAttribute('fill', '#fff');
}

function goToPage(uri) {
    window.location.href = uri;
}
